<script setup lang="ts">
import { h, onMounted, reactive, ref } from 'vue';
import { NButton, useDialog, useMessage } from 'naive-ui';

import { REQUEST } from '@/api/request';
import Search from './components/search.vue';
import Modal from './components/modal.vue';
const message = useMessage();
const dialog = useDialog();
const loading = ref(false);
defineOptions({
  name: 'Order'
});
const actionsArr: any = [
  {
    title: '编辑',
    key: 'edit'
  },
  {
    title: '删除',
    key: 'del'
  }
];
const columns: any = ref([
  {
    title: '姓名',
    key: 'userName',
    minWidth: 100
  },
  {
    title: '商品名称',
    key: 'shoppingName',
    minWidth: 150,
    render(row: any) {
      const buttonGroup = row.shoppingName.map((it: any) => {
        return h(
          NButton,
          {
            size: 'tiny',
            type: 'warning',
            style: {
              marginRight: '6px'
            },
            onClick: () => {}
          },
          {
            default: () => it
          }
        );
      });
      return buttonGroup;
    }
  },
  {
    title: '交货日期',
    key: 'deliverTime',
    minWidth: 130
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    minWidth: 150,
    render(row: any) {
      const buttonGroup = actionsArr.map((item: any) => {
        return h(
          NButton,
          {
            size: 'small',
            type: item.key == 'edit' ? 'primary' : 'error',
            style: {
              marginRight: '6px'
            },
            onClick: () => {
              if (item.key === 'edit') {
                // eslint-disable-next-line @typescript-eslint/no-use-before-define
                edit(row);
              } else {
                // eslint-disable-next-line @typescript-eslint/no-use-before-define
                del(row);
              }
            }
          },
          {
            default: () => item.title
          }
        );
      });

      return buttonGroup;
    }
  }
]);

const tableData: any = ref([]);
const pagination = reactive({
  page: 1, // 受控模式下的当前页
  pageSize: 10, // 受控模式下的分页大小,每一页的数据大小
  showSizePicker: true, // 是否显示每页条数
  pageSizes: [10, 20, 50], // 每页条数,可自定义
  showQuickJumper: true,
  pageCount: 0,
  itemCount: 0, // 总条数
  prefix: () => {
    // 分页前缀
    return `共 ${pagination.itemCount} 项`;
  },
  onChange: page => {
    // 切换第几页时
    pagination.page = page;
    getData();
  },
  onPageSizeChange: pageSize => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getData();
  }
});
const queryForm: any = ref({});
const search = (datas: any) => {
  queryForm.value.name = datas.name;
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  getData();
};
onMounted(() => {
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  getData();
});
const getData = () => {
  loading.value = true;
  REQUEST.POST('ORDERLIST', {
    pageNumber: pagination.page,
    pageSize: pagination.pageSize,
    name: queryForm.value.name
  }).then((res: any) => {
    loading.value = false;
    tableData.value = res.data.records;
    tableData.value.map((item: any) => {
      item.shoppingName = item.remark.split(',');
    });
    console.log(tableData.value, '9999');
    pagination.page = res.data.current;
    pagination.itemCount = res.data.total;
  });
};
const showModal: any = ref(null);
const add = () => {
  showModal.value.open('新增订单');
};
const edit = (row: any) => {
  showModal.value.open('编辑订单', row);
};
const del = (row: any) => {
  dialog.warning({
    title: '警告',
    content: '确定删除当前数据吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      REQUEST.POST('ORDEREDEL', {
        ids: [`${row.id}`]
      }).then((res: any) => {
        if (res.status == 200) {
          message.success('删除成功！');
          getData();
        }
      });
    },
    onNegativeClick: () => {
      message.error('取消');
    }
  });
};
</script>

<template>
  <NSpace vertical :size="16">
    <NCard :bordered="false" class="card-wrapper">
      <Search @search="search"></Search>
    </NCard>
    <NCard :bordered="false" class="card-wrapper">
      <NFlex justify="space-between">
        <h1>订单列表</h1>
        <NButton type="primary" @click="add()">新增订单</NButton>
      </NFlex>
      <NDataTable
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
        :bordered="false"
      ></NDataTable>
    </NCard>
    <Modal ref="showModal" @ok="getData"></Modal>
  </NSpace>
</template>
